<template>
  <div>
    <div class="myChart" ref="myChart" :style="{width: width+'px', height: height+'px'}"></div>
  </div>
</template >

<script>
export default {
  name: 'Circlepie',
  props: {
    title: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: 300
    },
    width: {
      type: Number,
      default: 230
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
    colorList: {
      type: Array,
      default: () => ['#FF9966','#1890FF'],
    }
  },
  data() {
     return {}
  },
  computed: {},
  mounted(){
    this.drawLine();
  },
  methods:{
    drawLine(){
        let self = this;
        let myChart = this.$echarts.init(this.$refs.myChart)
        myChart.setOption({
            title: { 
              text: this.title,
              textStyle: {
                fontSize: 14,
                fontWeight: 'normal'
              },
            },
            tooltip: {},
            series: [{
                type: 'pie',
                data: this.dataSource,
                itemStyle: {
                  normal: {
                    color: function(params) {
                      var colorList = self.colorList;
                      return colorList[params.dataIndex]
                    }
                  }
                }
            }]
        }); 
    }
  }
}
</script>

<style lang="less" scoped>
.pie-title {
  font-size: 13px;
  margin: 12px;
  word-wrap: none;
  text-align: center;
}
.myChart{
  margin:0 auto;
}
</style>




